<template>
  <div class="common-wrap">
    <div style="width: 100%; height: 100%; position: absolute">
      <div id="main" style="height: 100%; width: 100%"></div>
    </div>
    <div style="position: absolute; color: #ccc; top: 25px; left: 430px">
      <el-select
        v-model="weekValue"
        @change="onChangeWeek"
        placeholder="Select"
        style="width: 100px"
      >
        <el-option
          v-for="item in week"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div style="width: 400px; height: 100%; position: absolute; padding: 10px">
      <div
        style="position: relative; width: 400px; height: 265px"
        v-for="item in letMe"
        :key="item"
      >
        <div class="img"></div>
        <div class="img2"></div>
        <div class="center"></div>
        <div class="title">{{ item.title }}</div>
        <div class="center_img">
          <div class="img3">
            <div class="img3-1"></div>
            <p class="title-nav">美森预报方式合计</p>
            <p class="title-num">{{ item.totalVolume }}</p>
            <p class="title-bum">CBM</p>
          </div>
          <div class="img4">
            <div class="img4-1"></div>
            <p class="title-nav">按70方合计/柜</p>
            <p class="title-num">{{ item.proportion }}</p>
            <p class="title-bum">柜</p>
          </div>
          <div class="img5">
            <div class="img5-1"></div>
            <p class="title-nav">SO</p>
            <p class="title-num">{{ item.soQuantity }}</p>
            <p class="title-bum">共仓位/{{ item.totalStorageSpace }}CBM</p>
          </div>
          <div class="img6">
            <div class="img6-1"></div>
            <p class="title-nav">剩余仓位</p>
            <p class="title-num">{{ item.remainingVolume }}</p>
            <p class="title-bum">CBM</p>
          </div>
        </div>
      </div>
    </div>
    <div
      style="
        width: 873px;
        position: absolute;
        right: 430px;
        padding: 10px;
        bottom: 9px;
        display: flex;
      "
    >
      <div
        style="position: relative; width: 400px; height: 265px"
        v-for="item in bumMe"
        :key="item"
      >
        <div class="img"></div>
        <div class="img2"></div>
        <div class="center"></div>
        <div class="title">{{ item.title }}</div>
        <div class="center_img">
          <div class="img3">
            <div class="img3-1"></div>
            <p class="title-nav">美森预报方式合计</p>
            <p class="title-num">{{ item.totalVolume }}</p>
            <p class="title-bum">CBM</p>
          </div>
          <div class="img4">
            <div class="img4-1"></div>
            <p class="title-nav">按70方合计/柜</p>
            <p class="title-num">{{ item.proportion }}</p>
            <p class="title-bum">柜</p>
          </div>
          <div class="img5">
            <div class="img5-1"></div>
            <p class="title-nav">SO</p>
            <p class="title-num">{{ item.soQuantity }}</p>
            <p class="title-bum">共仓位/{{ item.totalStorageSpace }}CBM</p>
          </div>
          <div class="img6">
            <div class="img6-1"></div>
            <p class="title-nav">剩余仓位</p>
            <p class="title-num">{{ item.remainingVolume }}</p>
            <p class="title-bum">CBM</p>
          </div>
        </div>
      </div>
    </div>
    <div
      style="
        width: 400px;
        height: 100%;
        position: absolute;
        right: 20px;
        padding: 10px;
      "
    >
      <div
        style="position: relative; width: 400px; height: 265px"
        v-for="item in rightMe"
        :key="item"
      >
        <div class="img"></div>
        <div class="img2"></div>
        <div class="center"></div>
        <div class="title">{{ item.title }}</div>
        <div class="center_img">
          <div class="img3">
            <div class="img3-1"></div>
            <p class="title-nav">美森预报方式合计</p>
            <p class="title-num">{{ item.totalVolume }}</p>
            <p class="title-bum">CBM</p>
          </div>
          <div class="img4">
            <div class="img4-1"></div>
            <p class="title-nav">按70方合计/柜</p>
            <p class="title-num">{{ item.proportion }}</p>
            <p class="title-bum">柜</p>
          </div>
          <div class="img5">
            <div class="img5-1"></div>
            <p class="title-nav">SO</p>
            <p class="title-num">{{ item.soQuantity }}</p>
            <p class="title-bum">共仓位/{{ item.totalStorageSpace }}CBM</p>
          </div>
          <div class="img6">
            <div class="img6-1"></div>
            <p class="title-nav">剩余仓位</p>
            <p class="title-num">{{ item.remainingVolume }}</p>
            <p class="title-bum">CBM</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, nextTick } from "vue"; // 正确引入ref和nextTick
import * as echarts from "echarts";
import { week, currentWeek } from "@/static/week.js";
// 关键：引入ECharts-GL
import "echarts-gl";
import * as api from "@/api/index.js";
const weekValue = ref(currentWeek());
// 导入纹理图片
import earthTexture from "@/assets/bi-yb/dt.jpg";
import starfieldTexture from "@/assets/bi-yb/xx.jpg";
const currentCountry = ref("美国");
const listData = ref([
  {
    title: "美森正班",
    soQuantity: "3",
    totalStorageSpace: "210",
    totalVolume: "140.03",
    remainingVolume: "140.03",
    proportion: "1.00",
  },
  {
    title: "美东DG",
    totalVolume: "163.58",
    proportion: "2.43",
    soQuantity: "3",
    totalStorageSpace: "210",
    remainingVolume: "32.02",
  },
  {
    title: "美西DG柜",
    totalVolume: "96.55",
    proportion: "1.44",
    soQuantity: "3",
    totalStorageSpace: "207",
    remainingVolume: "110.45",
  },
  {
    title: "美西普船",
    totalVolume: "106.28",
    proportion: "1.52",
    soQuantity: "3",
    totalStorageSpace: "210",
    remainingVolume: "103.72",
  },
  {
    title: "以星DG柜",
    totalVolume: "2.00",
    proportion: "0.03",
    soQuantity: "1",
    totalStorageSpace: "69",
    remainingVolume: "67.00",
  },
  {
    title: "美西以星",
    totalVolume: "2.00",
    proportion: "0.33",
    soQuantity: "0",
    totalStorageSpace: "0",
    remainingVolume: "-2.00",
  },
  {
    title: "美西港柜",
    totalVolume: "14.45",
    proportion: "0.22",
    soQuantity: "1",
    totalStorageSpace: "69",
    remainingVolume: "54.55",
  },
  {
    title: "英国",
    totalVolume: "0.00",
    proportion: "0.00",
    soQuantity: "0",
    totalStorageSpace: "0",
    remainingVolume: "0.00",
  },
  {
    title: "英国DG",
    totalVolume: "0.00",
    proportion: "0.00",
    soQuantity: "1",
    totalStorageSpace: "68",
    remainingVolume: "68.00",
  },
  {
    title: "欧洲",
    totalVolume: "10.79",
    proportion: "0.15",
    soQuantity: "0",
    totalStorageSpace: "0",
    remainingVolume: "-10.79",
  },
  {
    title: "欧洲DG",
    totalVolume: "19.07",
    proportion: "0.28",
    soQuantity: "1",
    totalStorageSpace: "68",
    remainingVolume: "48.93",
  },
  {
    title: "欧洲港柜",
    totalVolume: "0.00",
    proportion: "0.00",
    soQuantity: "1",
    totalStorageSpace: "70",
    remainingVolume: "70.00",
  },
]);
const letMe = ref([]);
const rightMe = ref([]);
const bumMe = ref([]);
const option = ref({
  backgroundColor: "#000",
  globeOuterRadius: 0,
  globe: {
    baseTexture: earthTexture, // 使用确保可访问的路径
    shading: "lambert",
    environment: starfieldTexture, // 使用确保可访问的路径
    atmosphere: {
      show: true,
    },
    light: {
      ambient: {
        intensity: 0.5,
      },
      main: {
        intensity: 1,
      },
    },
    viewControl: {
      distance: 300, // 增加距离使地球变小
      alpha: 0,
      beta: 0,
      center: [0, -40, 0],
      autoRotate: true,
      autoRotateSpeed:10,
      autoRotateAfterStill:5
    },
  },
  series: [
    {
      type: "scatter3D",
      coordinateSystem: "globe",
      symbolSize: 15,
      blendMode: "lighter",
      label: {
        show: true,
        position: "top",
        formatter: "{b}",
        color: "#fff",
        fontSize: 16,
        fontWeight: "bold",
        textBorderColor: "#000",
        textBorderWidth: 3,
        distance: 12,
      },
      itemStyle: {
        color: "#ff6347",
        opacity: 0.9,
        borderWidth: 1,
        borderColor: "#fff",
      },
      emphasis: {
        itemStyle: {
          color: "#ffff00",
          opacity: 1,
          borderColor: "#fff",
          borderWidth: 2,
        },
      },
      data: [
        { name: "盐田港", value: [114.1, 22.5, 0] },
        { name: "洛杉矶港", value: [-118.3, 33.7, 0], country: "美国" },
        { name: "纽约港", value: [-74.0, 40.7, 0], country: "美国" },
        { name: "伦敦港", value: [-0.1, 51.5, 0], country: "英国" },
        { name: "鹿特丹港", value: [4.3, 51.9, 0], country: "英国" },
      ],
    },
    {
      type: "lines3D",
      coordinateSystem: "globe",
      effect: {
        show: true,
        period: 6,
        trailLength: 0.1,
        color: "#fff",
        symbolSize: 3,
      },
      lineStyle: {
        width: 2,
        color: "#00ffff",
        opacity: 0.8,
      },
      data: [
        {
          coords: [
            [114.1, 22.5, 0], // 盐田港
            [-118.3, 33.7, 0], // 洛杉矶港
          ],
          name: "盐田港 → 洛杉矶港",
        },
        {
          coords: [
            [114.1, 22.5, 0], // 盐田港
            [-74.0, 40.7, 0], // 纽约港
          ],
          name: "盐田港 → 纽约港",
        },
        {
          coords: [
            [114.1, 22.5, 0], // 盐田港
            [-0.1, 51.5, 0], // 伦敦港
          ],
          name: "盐田港 → 伦敦港",
        },
        {
          coords: [
            [114.1, 22.5, 0], // 盐田港
            [4.3, 51.9, 0], // 鹿特丹港
          ],
          name: "盐田港 → 鹿特丹港",
        },
        {
          coords: [
            [-118.3, 33.7, 0], // 洛杉矶港
            [-74.0, 40.7, 0], // 纽约港
          ],
          name: "洛杉矶港 → 纽约港",
        },
        {
          coords: [
            [-0.1, 51.5, 0], // 伦敦港
            [4.3, 51.9, 0], // 鹿特丹港
          ],
          name: "伦敦港 → 鹿特丹港",
        },
      ],
    },
  ],
});

const chart = ref(null);

onMounted(() => {
  apiList();
  // 使用nextTick确保DOM完全渲染后再初始化
  nextTick(() => {
    try {
      const chartDom = document.getElementById("main");

      if (!chartDom) {
        console.error("Chart container not found");
        return;
      }

      // 检查是否已经存在图表实例，如果存在则销毁
      if (chart.value) {
        chart.value.dispose();
      }

      chart.value = echarts.init(chartDom);

      // 设置加载动画
      chart.value.showLoading("default", {
        text: "正在加载地球模型...",
        color: "#00ffff",
        textColor: "#fff",
        maskColor: "rgba(0, 0, 0, 0.8)",
        zlevel: 0,
      });

      option.value && chart.value.setOption(option.value);

      // 隐藏加载动画
      chart.value.hideLoading();

      // 添加点击事件
      chart.value.on("click", function (params) {
        if (
          params.componentType === "series" &&
          params.seriesType === "scatter3D"
        ) {
          currentCountry.value = params.data.country;
          list();
        }
      });

      // 性能优化：节流resize事件
      let resizeTimer = null;
      const handleResize = () => {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
          chart.value?.resize();
        }, 100);
      };

      // 监听窗口大小变化
      window.addEventListener("resize", handleResize);

      // 清理函数
      const cleanup = () => {
        window.removeEventListener("resize", handleResize);
        if (resizeTimer) {
          clearTimeout(resizeTimer);
        }
      };

      // 将清理函数保存到组件实例
      if (chart.value) {
        chart.value._cleanup = cleanup;
      }

      console.log("ECharts 3D地球初始化成功");
    } catch (error) {
      console.error("初始化ECharts 3D地球失败:", error);
    }
  });
});
const apiList = (value) => {
  api.default.order.cargoForecast
    .forecastDashboard({
      week: weekValue.value,
    })
    .then((res) => {
      if (res.code === 200) {
        // listData.value = res.data || [];
        list();
      }
    });
};
const list = () => {
  let length = 0;
  let arr = [];
  switch (currentCountry.value) {
    case "中国":
      break;
    case "美国":
      arr = listData.value.slice(0, 7);
      length = Math.ceil(7 / 3);
      break;
    case "英国":
      arr = listData.value.slice(7);
      length = Math.ceil(5 / 3) + 1;
      break;
  }
  for (let i = 0; i < length; i++) {
    switch (i) {
      case 0:
        letMe.value = arr.slice(0, 3);
        break;
      case 1:
        rightMe.value = arr.slice(i * 3, 3 * (i + 1));
        break;
      case 2:
        bumMe.value = arr.slice(i * 3, 3 * (i + 1));
        break;
    }
  }
};
// 组件卸载时销毁图表实例
onUnmounted(() => {
  if (chart.value) {
    // 执行清理函数
    if (chart.value._cleanup) {
      chart.value._cleanup();
    }

    // 销毁ECharts实例
    chart.value.dispose();
    chart.value = null;
    console.log("ECharts实例已销毁");
  }
});
</script>
<style lang="scss" scoped>
.div {
  height: 100%;
  width: 100%;
  padding: 10px;
  background: url("@/assets/bi-yb/Snipaste_2025-11-14_17-03-10.png") no-repeat;
  background-size: 100% 100%;
}

/* 性能优化样式 */
#main {
  width: 100%;
  height: 100%;
  /* 启用GPU加速 */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  /* 减少重绘 */
  contain: layout style paint;
  /* 优化渲染性能 */
  isolation: isolate;
}

.img {
  width: 100%;
  height: 42px;
  position: absolute;
  top: 0;
  z-index: 2;
  background: url("@/assets/bi-yb/1673515399079-JLmayury.png") no-repeat;
}
.img2 {
  height: 265px;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 1;
  background: url("@/assets/bi-yb/1673515467452-HsZL6M6v.png") no-repeat;
}
.img3 {
  width: 180px;
  height: 100px;
  background: url("@/assets/bi-yb/1678419206180-21r-hY8E.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 5px;
  position: relative;
  .img3-1 {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 21px;
    right: 15px;
    z-index: 1;
    background: url("@/assets/bi-yb/war-z.png") no-repeat;
    background-size: 100% 100%;
  }
}
.img4 {
  width: 180px;
  height: 100px;
  background: url("@/assets/bi-yb/1678419205418-a3E3pEj7.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 5px;
  position: relative;
  .img4-1 {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 21px;
    right: 15px;
    z-index: 1;
    background: url("@/assets/bi-yb/red-z.png") no-repeat;
    background-size: 100% 100%;
  }
}
.img5 {
  width: 180px;
  height: 100px;
  background: url("@/assets/bi-yb/1678419206945-Sa0Itmjo.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .img5-1 {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 21px;
    right: 15px;
    z-index: 1;
    background: url("@/assets/bi-yb/lv-z.png") no-repeat;
    background-size: 100% 100%;
  }
}
.img6 {
  width: 180px;
  height: 100px;
  background: url("@/assets/bi-yb/1678419208028-foajAi-F.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .img6-1 {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 21px;
    right: 15px;
    z-index: 1;
    background: url("@/assets/bi-yb/lr-z.png") no-repeat;
    background-size: 100% 100%;
  }
}
.center {
  width: 100%;
  height: 265px;
  position: absolute;
  top: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.3);
}
.title {
  position: absolute;
  top: 0;
  z-index: 3;
  font-size: 21px;
  margin-left: 5px;
  line-height: 42px;
  color: #fff;
  font-weight: 700;
}
.center_img {
  padding: 0 10px;
  width: 100%;
  position: absolute;
  top: 50px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.title-nav {
  color: #fff;
  font-size: 13px;
  margin-top: 5px;
}
.title-num {
  font-weight: 700;
  font-size: 27px;
  padding: 0px 20px;
  color: #fff;
}
.title-bum {
  color: #fff;
  font-size: 13px;
}
p {
  padding: 5px 20px;
  margin: 0;
}
:deep() .el-select__icon {
  color: #00f1ff;
}
:deep() .el-select__selected-item {
  color: #00f1ff;
}
:deep() .el-select__wrapper {
  background: none !important;
  box-shadow: none !important;
}
</style>
